<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>[[${question.title}]]</title>
    <link rel="stylesheet" href="/static/css/bulma.min.css" th:href="@{/css/bulma.min.css}">
    <link rel="stylesheet" href="/static/css/community.css" th:href="@{/css/community.css}">
    <link rel="stylesheet" href="/static/css/notice.css" th:href="@{/css/notice.css}">
    <link rel="stylesheet" href="/static/css/comment.css" th:href="@{/css/comment.css}">
    <link rel="stylesheet" href="/static/css/comment-box.css" th:href="@{/css/comment-box.css}">
    <script type="text/javascript" src="/static/js/jquery-3.7.1.min.js" th:src="@{/js/jquery-3.7.1.min.js}"></script>
    <script type="text/javascript" src="/static/js/awesome.js" th:src="@{/js/awesome.js}"></script>
    <script type="text/javascript" src="/static/js/community.js" th:src="@{/js/community.js}"></script>
    <script type="text/javascript" src="/js/msg.js" th:src="@{/js/msg.js}"></script>
    <script type="text/javascript" src="/static/js/clipboard.min.js" th:src="@{/js/clipboard.min.js}"></script>
    <script type="text/javascript" src="/static/js/notice.js" th:src="@{/js/notice.js}"></script>
    <script type="text/javascript" src="/static/js/comment.js" th:src="@{/js/comment.js}"></script>
    <script type="text/javascript" src="/static/js/img.js" th:src="@{/js/img.js}"></script>
    <!--   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css">
       <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>

       <script>
           hljs.highlightAll();
       </script>-->
    <link rel="stylesheet" href="/static/css/prism.css" th:href="@{/css/msg.css}"/>
    <link rel="stylesheet" href="/static/css/prism.css" th:href="@{/css/prism.css}"/>
    <script type="text/javascript" src="/static/js/prism.js" th:src="@{/js/prism.js}"></script>
    <link rel="stylesheet" href="/static/css/emojionearea.min.css" th:href="@{/css/emojionearea.min.css}"/>
    <script type="text/javascript" src="/static/js/emojionearea.min.js" th:src="@{/js/emojionearea.min.js}"></script>
    <!--    <link rel="stylesheet" href="/static/css/prism-okaidia.css"  th:href="@{/css/prism-okaidia.css}"/>-->
    <!--    <script type="text/javascript" src="/static/js/prism-okaidia.js" th:src="@{/js/prism-okaidia.js}"></script>-->
</head>
<body class="has-navbar-fixed-top">
<!-- 错误提示飘窗 -->
<div id="toast" class="notification is-danger">
    错误信息：操作失败，请稍后再试。
</div>
<!-- 导航栏内容 -->
<div th:replace="~{common/nav::nav(current=1,size=10,keyword='')}"></div>
<!-- 中间部分内容 -->
<section class="section">
    <div class="container is-max-widescreen ">
        <div class="columns is-desktop index-top">
            <div class="column is-three-quarters">
                <div class="card index-card-border">
                    <div class=" detail-article">
                        <div class="">
                            <h1 class="title " th:text="${question.title}">
                                近来遇到失业者越来越多，我们要如何度过这段失业时光，等待转机出现？
                            </h1>
                            <div>
                                <a href="./" class="person-address" target="_blank"
                                   th:href="${(question.address==''||question.address==null)?'./':question.address}">
                                    <img class="rounded-avatar" th:src="${question.getAvatarUrl()}"
                                         src="/static/img/000.jpg" alt="User Avatar">
                                    <i class="fa-solid fa-at"></i>
                                    <span id="create-user-nickname" th:text="${question.nickname}">Sloan</span>
                                </a>
                                <span class="ml-2 detail-article-item">
                                        <i class="fa-duotone fa-solid fa-calendar-days"></i>
                                        <span th:text="${#temporals.format(question.createdTime,'yyyy/MM/dd HH:mm')}">2024-11-18</span>
                                </span>
                                <span class="ml-2 detail-article-item" th:if="${question.updatedTime!=null}">
                                        <i class="fa-duotone fa-solid fa-calendar-days"></i>
                                        <span th:text="${#temporals.format(question.updatedTime,'yyyy/MM/dd HH:mm')}">2024-11-18</span>
                                </span>
                                <span class="ml-2 ">
                                        <i class="fa-regular fa-eye"></i>
                                        <span th:text="${question.view}">100</span>
                                </span>
                                <span class="ml-2">
                                        <i class="fa-regular fa-thumbs-up"></i>
                                            <span th:text="${question.likeCount}">100</span>
                                </span>
                                <span class="ml-2"
                                      th:if="${session.user!=null&&question.userId.equals(session.user.id)}">
                                       <i class="fa-regular fa-pen-to-square "></i>
                                            <a class="detail-article-edit" th:href="${'/article/'+question.articleId}">编辑</a>
                                </span>
                            </div>
                            <div class="detail-article-bottom"
                                 th:if="${question.firstPicture!=null&&question.firstPicture!=''}"></div>
                            <div th:if="${question.firstPicture!=null&&question.firstPicture!=''}">
                                <img class="img-preview" th:src="${question.firstPicture}" src="/static/img/000.jpg"/>
                            </div>
                            <div class="detail-article-bottom"></div>

                            <div class="content content-html"
                                 th:utext="${#strings.replace(question.content, '<img', '<img class=img-preview')}">
                                <p>😅😂😂，笑死我了，哈哈哈哈，真的笑死我了</p>
                                <p><br></p>
                                <p><strong>哈哈哈哈，傻逼</strong></p>
                                <p><u>啦啦啦啦啦</u></p>
                                <p><u><em>阿德飒飒</em></u></p>
                                <p><s><u><em>拉萨看得见拉克斯基</em></u></s></p>
                                <p><u><em><code>·SpringWebFlux·</code></em></u></p>
                                <p><sup><u><em><code>啊飒飒打撒打撒</code></em></u></sup></p>
                                <p><br></p>
                                <p><sub><u><em><code>阿三大苏打</code></em></u></sub></p>
                                <p><br></p>
                                <ul>
                                    <li style="line-height: 1.15;"><span
                                            style="background-color: rgb(54, 207, 201);"><sub><u><em><code>阿迪斯</code></em></u></sub></span>
                                    </li>
                                    <li style="line-height: 1.15;"><span
                                            style="background-color: rgb(54, 207, 201);"><sub><u><em><code>阿萨大大 &nbsp; &nbsp;</code></em></u></sub></span>
                                    </li>
                                    <li style="line-height: 1.15;"><span
                                            style="background-color: rgb(54, 207, 201);"><sub><u><em><code>阿三大苏打</code></em></u></sub></span>
                                    </li>
                                    <ul>
                                        <li style="line-height: 1.15;"><span
                                                style="background-color: rgb(54, 207, 201);"><sub><u><em><code>阿萨大大</code></em></u></sub></span>
                                        </li>
                                        <li style="line-height: 1.15;"><span
                                                style="background-color: rgb(54, 207, 201);"><sub><u><em><code>阿三大苏打</code></em></u></sub></span>
                                        </li>
                                        <li style="line-height: 1.15;"><span
                                                style="background-color: rgb(54, 207, 201);"><sub><u><em><code>啊实打实大大</code></em></u></sub></span>
                                        </li>
                                    </ul>
                                    <ol>
                                        <li style="line-height: 1.15;"><span
                                                style="background-color: rgb(54, 207, 201);"><sub><u><em><code>😏😭😤</code></em></u></sub></span>
                                        </li>
                                        <li style="line-height: 1.15;"></li>
                                        <li style="line-height: 1.15;"></li>
                                    </ol>
                                </ul>
                                <p style="line-height: 1.15;"><br></p>
                                <ol>
                                    <ol>
                                        <li style="line-height: 1.15;"></li>
                                        <li style="line-height: 1.15;"></li>
                                        <ol>
                                            <li style="line-height: 1.15;"><span
                                                    style="background-color: rgb(54, 207, 201);"><sub><u><em><code>啊大苏打</code></em></u></sub></span>
                                            </li>
                                            <li style="line-height: 1.15;"></li>
                                        </ol>
                                        <li style="line-height: 1.15;"></li>
                                        <li style="line-height: 1.15;"></li>
                                        <li style="line-height: 1.15;"></li>
                                        <li style="line-height: 1.15;"></li>
                                    </ol>
                                </ol>
                                <p style="line-height: 1.15;"><span
                                        style="background-color: rgb(54, 207, 201);"><sub><code>阿松大</code></sub></span>
                                </p>
                                <p style="line-height: 1.15;"><br></p>
                                <p style="line-height: 1.15;"><br></p>
                                <div data-w-e-type="video" data-w-e-is-void>
                                    <video poster="https://community-sloan.oss-cn-shanghai.aliyuncs.com/video/images/2024/12/4/84ebbc77-64f8-4ae0-92c9-c62be28c3c9a.jpg"
                                           controls="true" width="200" height="200">
                                        <source src="https://community-sloan.oss-cn-shanghai.aliyuncs.com/video/images/2024/12/4/84ebbc77-64f8-4ae0-92c9-c62be28c3c9a.mp4"
                                                type="video/mp4"/>
                                    </video>
                                </div>
                                <pre><code class="language-java">

public class TextUtils {

    // 高亮词左右需要取的字符
    private final static Integer LEFT_N = 30;
    private final static Integer RIGHT_N = 30;

    public final static Integer TEXT_NUM=100;

    public static final String HIGH_LIGHT = "&lt;strong style='color:red'&gt;%s&lt;/strong&gt;";




    /**
     * 采用滑动窗口&合并区间算法来替换高亮词
     *
     * @param text
     * @param keyword
     * @return
     */
    public static String highlightText(String text, String keyword, Integer num) {
        if (keyword == null || keyword.isEmpty()) {
            return text;
        }

        List&lt;Boundary&gt; boundaries = getBoundaryIndex(text, keyword);int size = boundaries.size(); if (size == 0) {  return text;  }  List&lt;Boundary&gt; res = mergeBoundaryIndex(boundaries);

        StringBuilder sb = new StringBuilder();
        for (Boundary bd : res) {
            sb.append(text, bd.left, bd.right + 1);
            if (sb.length() &gt;= num) {
                break;
            }
        }

        return sb.append("...")
                .toString()
                .replace(keyword, String.format(HIGH_LIGHT, keyword));
    }

    public static List&lt;Boundary&gt; getBoundaryIndex(String text, String keyword) {
        List&lt;Boundary&gt; boundaries = new ArrayList&lt;&gt;();

        int tLen = text.length();
        int keyLen = keyword.length();
        char keyFirstC = keyword.charAt(0);

        int i = 0;
        while (i &lt;= tLen - keyLen) {
            char tC = text.charAt(i);
            if (keyFirstC != tC) {
                i++;
                continue;
            }

            int j = 1;
            boolean find = true;
            while (j &lt; keyLen) {
                if (keyword.charAt(j) != text.charAt(i + j)) {
                    find = false;
                    break;
                }
                j++;
            }

            if (!find) {
                i++;
            } else {
                int left = i;
                int right = i + keyLen - 1;
                int maxLeft = Math.max(left - LEFT_N, 0);
                int minRight = Math.min(right + RIGHT_N, text.length() - 1);
                boundaries.add(new Boundary(maxLeft, minRight));
                i = i + keyLen;
            }
        }
        return boundaries;
    }

    public static List&lt;Boundary&gt; mergeBoundaryIndex(List&lt;Boundary&gt; boundaries) {
        if (boundaries == null || boundaries.isEmpty()) {
            return boundaries;
        }

        List&lt;Boundary&gt; res = new ArrayList&lt;&gt;();

        Boundary last = boundaries.get(0);
        res.add(last);

        int idx = 1;
        int size = boundaries.size();
        while (idx &lt; size) {
            Boundary cur = boundaries.get(idx);
            if (cur.left &lt;= last.right) {
                res.remove(last);
                Boundary boundary = new Boundary(last.left, cur.right);
                res.add(boundary);
                last = boundary;
            } else {
                res.add(cur);
                last = cur;
            }
            idx++;
        }

        return res;
    }


    public static class Boundary {
        public int left;
        public int right;

        public Boundary(int left, int right) {
            this.left = left;
            this.right = right;
        }
    }


    public static void main(String[] args) {
        /**
         * 下标:  0  1  2  3  4  5  6  7  8  9  10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
         * 字符:  0  0  A  B  C  0  0  A  B  C  0  0  0  0  A  B  D  0  0  0  0  A  B  C  0  A  B
         */
        String text = "00ABC00000000000000ABC0000ABD0000ABC0AB";
        String keyword = "ABC";
        System.out.println(highlightText(text, keyword, 10));
    }

    public static void test1() {

    }


    public static class Index {
        public int left;
        public int right;

        public Index(int left, int right) {
            this.left = left;
            this.right = right;
        }
    }
}
</code></pre>
                                <table style="width: 100%;">
                                    <tbody>
                                    <tr>
                                        <th colspan="1" rowspan="1" width="auto">1</th>
                                        <th colspan="1" rowspan="1" width="auto">啊飒飒</th>
                                        <th colspan="1" rowspan="1" width="auto">q1231</th>
                                        <th colspan="1" rowspan="1" width="auto">1231</th>
                                    </tr>
                                    <tr>
                                        <td colspan="1" rowspan="1" width="auto">2</td>
                                        <td colspan="1" rowspan="1" width="auto">啊实打实</td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="1" rowspan="1" width="auto">3</td>
                                        <td colspan="1" rowspan="1" width="auto">a</td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="1" rowspan="1" width="auto">4</td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="1" rowspan="1" width="auto">5</td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto" style="text-align: center;"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                        <td colspan="1" rowspan="1" width="auto"></td>
                                    </tr>
                                    </tbody>
                                </table>
                                <p style="text-align: center;"><img
                                        src="https://community-sloan.oss-cn-shanghai.aliyuncs.com/article/images/2024/12/4/0e5bc0ca-bc99-4500-8325-e834b3a2c7fd.jpg"
                                        alt="0e5bc0ca-bc99-4500-8325-e834b3a2c7fd.jpg"
                                        data-href="https://community-sloan.oss-cn-shanghai.aliyuncs.com/article/images/2024/12/4/0e5bc0ca-bc99-4500-8325-e834b3a2c7fd.jpg"
                                        style="width: 432.60px;height: 438.20px;"></p>
                                <p style="text-align: center;">我日你哥的</p>
                                <p>
                                    很简单，IT不是像其他行业那样靠经验，IT技术更新换代太快了，我能熟练运用SVN，eclipce，可是有用吗？现在大家都流行用git，idea，谁还用这些玩意？年轻人他们学的是新技术，用在工作上的也是新技术，大龄码农一直做到底的开发的比较少，基本上过了30岁以上就进管理层了，再过十年出来找工作，IT技术更新到，他们连postman怎么用，两眼一黑，都不知道。你猜公司会要立马能干活的年轻人，还是什么活都干不了，具有丰富管理经验的大龄码农？</p>
                                <p>———————————————————————</p>
                                <p>
                                    我发现我的回答，好多人不理解啊，idea也好，git也罢，那可是最简单的开发工具，可是我遇到很多大厂的所谓的架构师开发连这个都不会用，例如特斯拉研发岗的data组组长徐雷就不会用。至于postman，是因为本人学历低，只能进小公司，我的其中一个小公司的老板请了阿里出来的技术专家当项目经理，这个项目经理跟我讲体测仪接口项目时，满口阿里术语，给我讲的头晕眼花，于是我让他用postman演示一下接口，结果我惊奇的发现，这个小公司老板请来的阿里的专家，竟然连postman都不会用，还是我手把手教的，虽然这个阿里专家不会，但是他有权啊，于是他第二天就口头把我辞退了，过了一个月，那家公司的前同事告诉我，这个小公司老板把那个阿里专家也口头辞退了。</p>
                                <p>
                                    可能各位看官又要提劳动仲裁之类的内容，我告诉你吧，小公司开几年就倒闭，人家可有大把时间跟你劳动仲裁外加打官司呢，等你在法院胜诉了，小公司早就倒闭了，所以领完工资，找下一家呗。</p>
                                <p><br></p>
                            </div>
                            <div>
                                <span class="ml-2">
                                         <i class="fa-solid fa-tag"></i>
                                         <a class="tag is-light is-link index-tag"
                                            th:each="tag:${question.tags}"
                                            th:href="${'/question/tag/'+tag.id+'.html'}"
                                            th:text="${tag.name}">经济</a>
                                </span>
                            </div>
                            <div class="level is-centered" style="margin-top: 20px;">
                                <div class="level-item">

                                    <span class="field is-grouped">
                                        <span id="article-like-count-btn" onclick="articleLikeCount(1)"
                                              th:onclick="|articleLikeCount(${question.articleId})|"
                                              th:class="'button is-rounded is-danger '+${session.user!=null&&question.sessionUserLike?'':'is-outlined'} "
                                              class=" button is-rounded is-danger is-outlined ">
                                             <i class="fas fa-thumbs-up"></i>&nbsp;
                                             <span id="article-like-count" th:text="${question.likeCount}">40</span>
                                        </span>

                                        <span th:if="${question.shareable}" id="share-article-btn"
                                              class=" button is-rounded is-outlined is-info">
                                           <i class="fa-solid fa-share"></i>&nbsp;
                                           <span th:text="${question.shareCount}" id="share-article-count">99</span>
                                       </span>
                                    </span>


                                </div>

                                <div class="modal" id="shareModal">
                                    <div class="modal-background"></div>
                                    <div class="modal-card">
                                        <header class="modal-card-head">
                                            <p class="modal-card-title">分享</p>
                                            <button class="delete" id="share-close-btn" aria-label="close"></button>
                                        </header>
                                        <section class="modal-card-body">
                                            <span id="share-text">
                                            </span>
                                        </section>
                                        <footer class="modal-card-foot">
                                            <div class="buttons">
                                                <span class="button is-dark" th:data-id="${question.articleId}"
                                                      id="copyBtn">复制</span>
                                                <!--<span class="button is-link" id="share-close-btn">关闭</span>-->
                                            </div>
                                        </footer>
                                    </div>
                                </div>
                            </div>

                            <div id="comment-article" class="comment-list">
                                <!--<div class="comment-item">
                                    &lt;!&ndash; 左侧头像部分 &ndash;&gt;
                                    <div class="comment-left">
                                        <figure class="media-left">
                                            <p class="image is-48x48">
                                                <img class="comment-avatar" src="/static/img/000.jpg" alt=""/>
                                            </p>
                                        </figure>
                                    </div>
                                    &lt;!&ndash; 右侧内容部分 &ndash;&gt;
                                    <div class="comment-right">
                                        <div class="comment-top">
                                            <span class="comment-content">
                                                <strong>
                                                    <a class="comment-nickname" target="_blank" href="#">Sloan</a>
                                                    <span class="tag is-dark user-auth">Gitee</span>
                                                    <span class="tag is-info question-author">作者</span>
                                                </strong>
                                                <br/>
                                                <span class="comment-text">
                                                    如何恢复人与人之间的关系222？我认为人类已经没有回头路，未来解决单身终老无人陪伴的问题是可以解决的，就是机器人。
                                                </span>
                                            </span>
                                        </div>
                                        <div class="comment-bottom">
                                            <span class="comment-btn-list">
                                                <span class="comment-btn-left">
                                                    <span class="comment-time">2024/12/13</span>
                                                </span>
                                                <span class="comment-btn-right">
                                                    <span class="comment-del comment-item-margin">删除</span>
                                                    <span class="comment-comment comment-item-margin">
                                                        <i class="fa-solid fa-message"></i>
                                                    </span>
                                                    <span class="comment-likeCount comment-item-margin">
                                                        <i class="fa-heart fa-regular"></i>
                                                        <span>99</span>
                                                    </span>
                                                    <span class="comment-share comment-item-margin">
                                                        <i class="fa-solid fa-share"></i>
                                                    </span>
                                                </span>
                                            </span>
                                        </div>
                                        <div class="comment-box" data-id="1">
                                            <div class="editor" contenteditable="true"></div>
                                            <div class="word-count">0/5000</div>
                                            <div class="toolbar">
                                                <div class="icons">
                                                    <i class="far fa-smile emoji-btn"></i>
                                                    <i class="fas fa-image image-btn"></i>
                                                    <input type="file" class="image-upload" accept="image/*"
                                                           style="display: none;">
                                                </div>
                                                <div class="submit-btn">
                                                    <button class="submit-comment">发布</button>
                                                </div>
                                            </div>
                                            <div class="emoji-picker">
                                                <span class="emoji">😀</span>
                                                <span class="emoji">😂</span>
                                                <span class="emoji">😍</span>
                                                <span class="emoji">👍</span>
                                                <span class="emoji">🎉</span>
                                                <span class="emoji">😢</span>
                                                <span class="emoji">😡</span>
                                            </div>
                                        </div>
                                        <div class="comment-item">
                                            &lt;!&ndash; 左侧头像部分 &ndash;&gt;
                                            <div class="comment-left">
                                                <figure class="media-left">
                                                    <p class="image is-48x48">
                                                        <img class="comment-avatar" src="/static/img/000.jpg" alt=""/>
                                                    </p>
                                                </figure>
                                            </div>
                                            &lt;!&ndash; 右侧内容部分 &ndash;&gt;
                                            <div class="comment-right">
                                                <div class="comment-top">
                                                    <span class="comment-content">
                                                        <strong>
                                                            <a class="comment-nickname" target="_blank" href="#">Sloan</a>
                                                            <span class="tag is-dark user-auth">Gitee</span>
                                                            <span class="tag is-info question-author">作者</span>
                                                        </strong>
                                                        <br/>
                                                        <span class="comment-text">
                                                            如何恢复人与人之间的关系222？我认为人类已经没有回头路，未来解决单身终老无人陪伴的问题是可以解决的，就是机器人。
                                                        </span>
                                                    </span>
                                                </div>
                                                <div class="comment-bottom">
                                                    <span class="comment-btn-list">
                                                        <span class="comment-btn-left">
                                                            <span class="comment-time">2024/12/13</span>
                                                        </span>
                                                        <span class="comment-btn-right">
                                                            <span class="comment-del comment-item-margin">删除</span>
                                                            <span class="comment-comment comment-item-margin">
                                                                <i class="fa-solid fa-message"></i>
                                                            </span>
                                                            <span class="comment-likeCount comment-item-margin">
                                                                <i class="fa-heart fa-regular"></i>
                                                                <span>99</span>
                                                            </span>
                                                            <span class="comment-share comment-item-margin">
                                                                <i class="fa-solid fa-share"></i>
                                                            </span>
                                                        </span>
                                                    </span>
                                                </div>
                                                <div class="comment-box" data-id="1">
                                                    <div class="editor" contenteditable="true"></div>
                                                    <div class="word-count">0/5000</div>
                                                    <div class="toolbar">
                                                        <div class="icons">
                                                            <i class="far fa-smile emoji-btn"></i>
                                                            <i class="fas fa-image image-btn"></i>
                                                            <input type="file" class="image-upload" accept="image/*"
                                                                   style="display: none;">
                                                        </div>
                                                        <div class="submit-btn">
                                                            <button class="submit-comment">发布</button>
                                                        </div>
                                                    </div>
                                                    <div class="emoji-picker">
                                                        <span class="emoji">😀</span>
                                                        <span class="emoji">😂</span>
                                                        <span class="emoji">😍</span>
                                                        <span class="emoji">👍</span>
                                                        <span class="emoji">🎉</span>
                                                        <span class="emoji">😢</span>
                                                        <span class="emoji">😡</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="comment-item">
                                            &lt;!&ndash; 左侧头像部分 &ndash;&gt;
                                            <div class="comment-left">
                                                <figure class="media-left">
                                                    <p class="image is-48x48">
                                                        <img class="comment-avatar" src="/static/img/000.jpg" alt=""/>
                                                    </p>
                                                </figure>
                                            </div>
                                            &lt;!&ndash; 右侧内容部分 &ndash;&gt;
                                            <div class="comment-right">
                                                <div class="comment-top">
                                                    <span class="comment-content">
                                                        <strong>
                                                            <a class="comment-nickname" target="_blank" href="#">Sloan</a>
                                                            <span class="tag is-dark user-auth">Gitee</span>
                                                            <span class="tag is-info question-author">作者</span>
                                                        </strong>
                                                        <br/>
                                                        <span class="comment-text">
                                                            如何恢复人与人之间的关系222？我认为人类已经没有回头路，未来解决单身终老无人陪伴的问题是可以解决的，就是机器人。
                                                        </span>
                                                        <span class="comment-reply">
                                                             <span class="comment-reply-line"></span>
                                                             <span class="comment-reply-frame">
                                                                 <a target="_blank" href="#">
                                                                 <i class="fa-solid fa-at"></i>
                                                                      <img class="rounded-avatar" src="/static/img/000.jpg" alt="...">
                                                                      <span>Sloan</span>
                                                                 </a>
                                                                 <span class="comment-reply-content">
                                                                     张嘴就是真理，闭嘴就是宪法，开口就算文明，闭口就是优秀，说得比唱的还好听，但凡你眼睛能落到实处，医疗教育交通治安自然灾害应对，一个比一个搞笑。美国现在就是这样的：只能吹虚空概念，不能看具体事实。
                                                                 </span>
                                                             </span>
                                                         </span>
                                                    </span>
                                                </div>
                                                <div class="comment-bottom">
                                                    <span class="comment-btn-list">
                                                        <span class="comment-btn-left">
                                                            <span class="comment-time">2024/12/13</span>
                                                        </span>
                                                        <span class="comment-btn-right">
                                                            <span class="comment-del comment-item-margin">删除</span>
                                                            <span class="comment-comment comment-item-margin">
                                                                <i class="fa-solid fa-message"></i>
                                                            </span>
                                                            <span class="comment-likeCount comment-item-margin">
                                                                <i class="fa-heart fa-regular"></i>
                                                                <span>99</span>
                                                            </span>
                                                            <span class="comment-share comment-item-margin">
                                                                <i class="fa-solid fa-share"></i>
                                                            </span>
                                                        </span>
                                                    </span>
                                                </div>
                                                <div class="comment-box" data-id="1">
                                                    <div class="editor" contenteditable="true"></div>
                                                    <div class="word-count">0/5000</div>
                                                    <div class="toolbar">
                                                        <div class="icons">
                                                            <i class="far fa-smile emoji-btn"></i>
                                                            <i class="fas fa-image image-btn"></i>
                                                            <input type="file" class="image-upload" accept="image/*"
                                                                   style="display: none;">
                                                        </div>
                                                        <div class="submit-btn">
                                                            <button class="submit-comment">发布</button>
                                                        </div>
                                                    </div>
                                                    <div class="emoji-picker">
                                                        <span class="emoji">😀</span>
                                                        <span class="emoji">😂</span>
                                                        <span class="emoji">😍</span>
                                                        <span class="emoji">👍</span>
                                                        <span class="emoji">🎉</span>
                                                        <span class="emoji">😢</span>
                                                        <span class="emoji">😡</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>-->
                            </div>

                            <div th:if="${question.commentable&&session.user==null}" style="margin-top: 30px">
                                <span class="divider"></span>
                                <span class="comment-login">
                                    <a class="person-child-div" href="./" th:href="@{/login.html}">先登录 再评论</a>
                                </span>
                            </div>

                            <div th:if="${!question.commentable}" style="margin-top: 30px">
                                <span class="comment-login">
                                     <span class="person-child-div">当前帖子不能评论</span>
                                </span>
                            </div>

                            <div th:if="${question.commentable&&session.user!=null}">
                                <div class="comment-item">
                                    <!-- 左侧头像部分 -->
                                    <div class="comment-left article-comment-avatar">
                                        <figure class="media-left">
                                            <p class="image is-48x48">
                                                <img class="comment-avatar" src="/static/img/000.jpg" th:src="${session.user.avatarUrl}" alt=""/>
                                            </p>
                                        </figure>
                                    </div>
                                    <!-- 右侧内容部分 -->
                                    <div class="comment-right" id="article-comment-box">
                                        <!--<div class="comment-box" data-id="1">
                                            <div class="editor" contenteditable="true"></div>
                                            <div class="word-count">0/5000</div>
                                            <div class="toolbar">
                                                <div class="icons">
                                                    <i class="far fa-smile emoji-btn"></i>
                                                    <i class="fas fa-image image-btn"></i>
                                                    <input type="file" class="image-upload" accept="image/*"
                                                           style="display: none;">
                                                </div>
                                                <div class="submit-btn">
                                                    <button class="submit-comment">发布</button>
                                                </div>
                                            </div>
                                            <div class="emoji-picker">
                                                <span class="emoji">😀</span>
                                                <span class="emoji">😂</span>
                                                <span class="emoji">😍</span>
                                                <span class="emoji">👍</span>
                                                <span class="emoji">🎉</span>
                                                <span class="emoji">😢</span>
                                                <span class="emoji">😡</span>
                                            </div>
                                        </div>-->
                                    </div>
                                </div>
                            </div>

                            <!--弹框评论-->
                            <!--  <div class="modal is-active" id="comment-chat-modal" >
                                  <div class="modal-background"></div>
                                  <div class="modal-card">
                                      <header class="modal-card-head">
                                          <p class="modal-card-title">
                                              评论对话信息
                                          </p>
                                          <button class="delete" id="comment-chat-modal-close" aria-label="close"></button>
                                      </header>
                                      <section class="modal-card-body" id="comment-chat-list">
                                          &lt;!&ndash;聊天内容&ndash;&gt;
                                      </section>
                                      <footer class="modal-card-foot" >
                                          <div th:if="${question.commentable}">
                                              <div th:if="${session.user==null}" style="margin-top: 30px;width:100%;" >
                                                  <span class="comment-login" >
                                                        <a class="person-child-div" href="./" th:href="@{/login.html}">先登录 再评论</a>
                                                  </span>
                                              </div>
                                              <div th:if="${session.user!=null}" style="width:100%;">
                                                  <article class="media">
                                                      <figure class="media-left">
                                                          <p class="image is-48x48">
                                                              <img class="comment-avatar" th:src="${session.user.avatarUrl}" src="/static/img/000.jpg"/>
                                                          </p>
                                                      </figure>
                                                      <div class="media-content">
                                                          <div class="comment-box" data-id="1">
                                                              <div class="editor" contenteditable="true"></div>
                                                              <div class="word-count">0/5000</div>
                                                              <div class="toolbar">
                                                                  <div class="icons">
                                                                      <i class="far fa-smile emoji-btn"></i>
                                                                      <i class="fas fa-image image-btn"></i>
                                                                      <input type="file" class="image-upload" accept="image/*" style="display: none;">
                                                                  </div>
                                                                  <div class="submit-btn">
                                                                      <button class="submit-comment">发布</button>
                                                                  </div>
                                                              </div>
                                                              <div class="emoji-picker">
                                                                  <span class="emoji">😀</span>
                                                                  <span class="emoji">😂</span>
                                                                  <span class="emoji">😍</span>
                                                                  <span class="emoji">👍</span>
                                                                  <span class="emoji">🎉</span>
                                                                  <span class="emoji">😢</span>
                                                                  <span class="emoji">😡</span>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </article>
                                              </div>
                                          </div>
                                          <div th:if="${!question.commentable}">
                                             <span class="comment-login" >
                                                  <span class="person-child-div">当前帖子不能评论</span>
                                             </span>
                                          </div>
                                      </footer>
                                  </div>
                              </div>-->

                        </div>
                    </div>
                </div>

            </div>
            <div class="column is-one-quarter">
                <div class="card index-card-border">
                    <div>
                        <p class="card-header-title">
                            个人简介
                        </p>
                    </div>
                    <div class="divider"></div>
                    <div class="person-div">
                        <div id="personal" class="person-child-div">
                            <img class="image person-avatar" th:src="${question.avatarUrl}" src="/static/img/000.jpg"
                                 alt="">
                            <div class="person-name">
                                <a class="person-address" href="./" target="_blank"
                                   th:href="${(question.address==''||question.address==null)?'./':question.address}">
                                   <span th:text="${'@'+question.nickname}">
                                       @Sloan
                                   </span>
                                    <span th:text="${'['+question.fromT+']'}">[GitHub]</span>
                                </a>
                            </div>
                            <div>
                                <i class="fa-solid fa-house"></i>
                                <a class="person-address-href" href="./" target="_blank"
                                   th:href="${(question.address==''||question.address==null)?'./':question.address}">
                                    主页地址
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!--<div class="card index-card-border">
                    <div class="columns">
                        <div class="column is-auto-fill">
                            <div>
                                <p class="card-header-title">
                                    代办 &nbsp;
                                    <i class="fa-solid fa-tag"></i>
                                </p>
                            </div>
                            <div class="divider"></div>
                            <div class="card-content">
                                <div class="content">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
                                    iaculis mauris.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>-->
            </div>
        </div>
    </div>
</section>
<!-- 底部部分内容 -->
<div th:replace="~{common/footer::footer}"></div>
<script th:inline="javascript" type="application/javascript">

    $(window).on('load', function () {
        $(document).ready(function () {

            var articleId = [[${question.articleId}]]
            console.log("获取到文章ID：" + articleId);

            questionCommentList(articleId, () => {
                let $articleCommentBox = $("#article-comment-box");
                if ($articleCommentBox.length) {
                    $articleCommentBox.append(
                        generatorCommentBoxHtml(articleId, 0, 0)
                            .replace('class="comment-box"', 'class="comment-box article-comment-box"')
                    );
                }

                // 跳转评论
                const hash = window.location.hash;
                if (hash.startsWith('#commentId-')) {
                    const commentId = hash.replace('#commentId-', '');
                    scrollToComment(articleId, commentId)
                }
            })

            // 使用 Clipboard.js 复制文本
            var clipboard = new ClipboardJS('#copyBtn', {
                text: function () {
                    return $('#share-text').text();
                }
            });

            clipboard.on('success', function (e) {
                let $copyBtn = $('#copyBtn');
                let $share = $("#share-article-count");
                $copyBtn.attr('disabled', true);
                $share.text(parseInt($share.text(), 10) + 1)
                share($copyBtn.data("id"))
                // $("#shareModal").removeClass("is-active");
                e.clearSelection();
            });

            clipboard.on('error', function (e) {
                alert('复制失败，请手动复制链接');
            });

        })
    })
</script>
</body>
</html>